<template>
    <h1>用户详细信息</h1>

    <table>
        <tr>
            <td>真实姓名</td>
            <td>
                <input type="text" v-model="info.U_Name" placeholder="请输入真实姓名">
            </td>
        </tr>

        <tr>
            <td>联系方式</td>
            <td>
                <input type="text" v-model="info.U_Phone" placeholder="请输入联系方式" >
            </td>
        </tr>

        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" v-model="info.U_Sex" value="false">男
                <input type="radio" name="sex" v-model="info.U_Sex" value="true">女
            </td>
        </tr>

        <tr>
            <td>身份证号</td>
            <td>
                <input type="text" v-model="info.U_IdCard" placeholder="请输入身份证号" @change="SubstrData" >
            </td>
        </tr>

        <tr>
            <td>出生日期</td>
            <td>
                <input type="date" v-model="info.U_Date" placeholder="请输入出生日期" >
            </td>
        </tr>

        <tr>
            <td>年收益</td>
            <td>
                <input type="text" v-model="info.U_money" placeholder="请输入年收益" >
            </td>
        </tr>

        <tr>
            <td>用户类型</td>
            <td>
                <select v-model="info.UT_Id">
                    <option value="0">请选择</option>
                    <option v-for="item in UserType" :key="item.UT_Id" :value="item.UT_Id">
                        {{item.UT_Name}}
                    </option>
                </select>
            </td>
        </tr>

        <tr>
            <td colspan="2">
                <input type="button" value="保存" @click="UserInfoAdd">
            </td>
        </tr>

    </table>

</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue'
import axios from 'axios'

import { useRoute } from 'vue-router'

const route = useRoute();

console.log(route.params.U_Id);

//用户类型
const UserType = ref([{
    UT_Id:'',
    UT_Name:''
}])

//用户详细信息
const info = ref({
    U_Id:'',
    U_Name:'',
    U_Phone:'',
    U_Sex:'',
    U_IdCard:'',
    U_Date:'',
    U_money:'',
    UT_Id:0,
})

//显示用户类型
onMounted(()=>{
    axios({
        method:'get',
        url:'http://localhost:56707/api/User/ShowUserType',
    })
    .then((res)=>{
        console.log(res.data);
        UserType.value = res.data;
    })
    .catch((err)=>{
        console.log(err);
    })
})

//通过身份证号获取出生日期
const SubstrData = ()=>{
    var str = info.value.U_IdCard;
    var Dyear = str.substring(6,10);
    var Dmonth = str.substring(10,12);
    var Dday = str.substring(12,14);
    info.value.U_Date = Dyear+'-'+Dmonth+'-'+Dday;
}

//添加用户详细信息
const UserInfoAdd =()=>{

    if(info.value.U_Name==''){
        alert('真实姓名不能为空');
        return;
    }

    //验证联系方式
    var res = /^1[3456789]\d{9}$/;
    if(info.value.U_Phone==''){
        alert('联系方式不能为空');
        return;
    }
    if(!res.test(info.value.U_Phone)){
        alert('请输入正确的联系方式');
        return;
    }

    //验证身份证号
    var res1 = /(^\d{15}$|(^\d{17}([0-9]|X)$))/;
    if(info.value.U_IdCard==''){
        alert('身份证号不能为空');
        return;
    }
    if(!res1.test(info.value.U_IdCard)){
        alert('请输入正确的身份证号');
        return;
    }
    //验证年收益
    if(info.value.U_money==''){
        alert('年收益不能为空');
        return;
    }

    if(isNaN(Number(info.value.U_money) ) ){
        alert('年收益必须为数字');
        return;
    }

    axios({
        method:'post',
        url:'http://localhost:56707/api/User/UserInfoAdd',
        data:{
            U_Id:route.params.U_Id,
            U_Name:info.value.U_Name,
            U_Phone:info.value.U_Phone,
            U_Sex:info.value.U_Sex,
            U_IdCard:info.value.U_IdCard,
            U_Date:info.value.U_Date,
            U_money:info.value.U_money,
            UT_Id:info.value.UT_Id,
        },
    })
    .then((res)=>{
        if(res.data>0){
            alert('用户详细信息完善成功');
        }
        else{
            alert('用户详细信息完善失败');
        }
    })
    .catch((err)=>{
        console.log(err);
    })
}


</script>
